<template>
  <div class="use-intersection-observer">
    <div ref="target" class="test-box"></div>
  </div>
  <div class="status">是否在use-intersection-observer可见？{{ targetVisible }}</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useIntersectionObserver } from "@vueuse/core";

defineOptions({
  name: "UseIntersectionObserver"
})

const targetVisible = ref(false)
const target = ref<HTMLElement | null>(null)
useIntersectionObserver(
    target,
    ([{ isIntersecting }]) => {
        targetVisible.value = isIntersecting
    }
)
</script>

<style scoped lang="css">
.use-intersection-observer {
  height: 500px;
  width: 600px;
  margin: 30px auto;
  border: 1px dashed #eeeeee;
  overflow-y: auto;
  .test-box {
    width: 400px;
    background: pink;
    height: 100px;
    margin: 800px auto;
  }
}
</style>
